<template>
  <div>
      <div class="top panel">
          <div class="inner">
              <div class="all">
                  <h3>全国热榜</h3>
                  <ul>
                      <li>
                          <i class="icon-cup1">1</i>
                        可爱多
                      </li>
                      <li>
                          <i class="icon-cup2">2</i>
                        娃哈哈
                      </li>
                      <li>
                          <i class="icon-cup3">3</i>
                        喜之郎
                      </li>
                  </ul>
              </div>
              <div class="province">
                  <h3>各省热销<i class="date gesheng"></i></h3>
                  <div class="data">
                      <ul class="sup">
                          <li :class="active == 0 ? 'active' : ''" @mouseover="tagChange(0)">
                              <span>北京</span>
                              <span>25,179<s class="icon-up"></s></span>
                          </li>
                          <li :class="active == 1 ? 'active' : ''" @mouseover="tagChange(1)">
                              <span>河北</span>
                              <span>23,252<s class="icon-down"></s></span>
                          </li>
                          <li :class="active == 2 ? 'active' : ''" @mouseover="tagChange(2)">
                              <span>上海</span>
                              <span>20,760<s class="icon-up"></s></span>
                          </li>
                          <li :class="active == 3 ? 'active' : ''" @mouseover="tagChange(3)">
                              <span>江苏</span>
                              <span>23,252<s class="icon-down"></s></span>
                          </li>
                          <li :class="active == 4 ? 'active' : ''" @mouseover="tagChange(4)">
                              <span>山东</span>
                              <span>20,760<s class="icon-up"></s></span>
                          </li>
                      </ul>
                      <ul class="sub">
                          <li v-for="(item, index) in loopData[active]" :key="index">
                              {{item[0]}}
                              <span>{{item[1]}}</span>
                              <span>
                                <s class="icon-up"></s>
                              </span>
                          </li>
                      </ul>
                  </div>
              </div>
          </div>
      </div>
  </div>
</template>

<script>
export default {
    data(){
        return{
            active : 0,
            loopData:[
                [
                    ['可爱多','9,765'],
                    ['娃哈哈','5,679'],
                    ['喜之郎','3,567'],
                    ['八喜','8,674'],
                    ['小洋人','2,567'],
                    ['好多鱼','9,343'],
                ],
                [
                    ['小洋人','2,567'],
                    ['好多鱼','9,343'],
                    ['可爱多','9,765'],
                    ['娃哈哈','5,679'],
                    ['八喜','8,674'],
                    ['喜之郎','3,567'],
                    
                ],
                [
                    ['八喜','8,674'],
                    ['小洋人','2,567'],
                    ['喜之郎','3,567'],
                    ['娃哈哈','5,679'],
                    ['好多鱼','9,343'],
                    ['可爱多','9,765'],
                ],
                [
                    ['好多鱼','9,343'],
                    ['可爱多','9,765'],
                    ['娃哈哈','5,679'],
                    ['喜之郎','3,567'],
                    ['小洋人','2,567'],
                    ['八喜','8,674'],
                    
                ],
                [
                    ['可爱多','9,765'],
                    ['喜之郎','3,567'],
                    ['娃哈哈','5,679'],
                    ['八喜','8,674'],
                    ['好多鱼','9,343'],
                    ['小洋人','2,567'],
                ],
            ]
        }
    },
    mounted(){
        setInterval(() => {
            this.active += 1
            if(this.active > 4){
                this.active = 0
            }
        }, 2000)
    },
    methods:{
        tagChange(x){
            this.active = x
        }
    }
}
</script>

<style scoped>
    .top{
        height: 4.78rem;
    }
    .top .inner{
        display: flex;
    }
    .top .all{
        display: flex;
        flex-direction: column;
        width: 2.1rem;
        color: #4c9bfd;
        font-size: 0.175rem;
        vertical-align: middle;
    }
    h3{
        font-size: 0.35rem !important;
        width: 2rem;
    }
    .province h3{
        display: inline-block;
        margin-left: 0.8rem;
    }
    .top .all ul{
        padding-left: 0.15rem;
        margin-top: 0.15rem;
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
    }

    .top .all li{
        overflow: hidden;
    }
    .top .all [class^="icon-"]{
        font-size: 0.45rem;
        vertical-align: middle;
        margin-right: 0.15rem;
    }

    .top .province{
        flex: 1;
        display: flex;
        flex-direction: column;
        color: #fff;
    }

    .top .province i{
        padding: 0 0.15rem;
        margin-top: 0.0625rem;
        float: right;
        font-style: normal;
        font-size: 0.175rem;
        color: #0bace6;
    }

    .top .province s{
        display: inline-block;
        transform: scale(0.8);
        text-decoration: none;
    }

    .top .province .icon-up{
        width: 0.25rem;
        height: 0.25rem;
        background: url(../../assets/image/上箭头.png) no-repeat center;
        background-size: 0.3rem auto;
        margin-left: 0.1rem;
    }
    .top .province .icon-down{
        width: 0.25rem;
        height: 0.25rem;
        background: url(../../assets/image/下箭头.png) no-repeat center;
        background-size: 0.3rem auto;
        margin-left: 0.1rem;
    }

    .top .province .data{
        flex: 1;
        display: flex;
        margin-top: 0.175rem;
    }

    .top .province ul{
        flex: 1;
        line-height: 1;
        margin-bottom: 0.175rem;
    }
    .top .province ul li{
        display: flex;
        /* width: 2.3rem; */
        margin-left: 0.3rem;
        padding-right: 0.2rem;
        justify-content: space-between;
        line-height: 1;
    }

    .top .province ul span{
        display: block;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        line-height: 0.25rem;
    }

    .top .province ul.sup{
        font-size: 0.175rem;
    }
    .top .province ul.sup li{
        color: #4995f4;
        padding: 0.15rem;
        line-height: 1;
        width:83.5%;
    }

    .active{
        color: #a3c6f2;
        background-color: rgba(10, 67, 188, 0.2);
    }

    .top .province ul.sub{
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        font-size: 0.15rem;
        background-color: rgba(10,67,188,0.2);
    }
    .top .province ul.sub li{
        color: #52ffff;
        padding: 0.125rem 0.175rem;
    }
    .clock{
        position: absolute;
        top: -0.45rem;
        right: 0.5rem;
        font-size: 0.25rem;
        color: #0bace6;
    }
    .clock i{
        margin-right: 5px;
        font-size: 0.25rem;
    }

    @media screen and (max-width: 1600px) {
        .top span {
            transform: scale(0.9);
        }
        /* .top .province ul.sup li {
            padding: 0.125rem 0.15rem;
        }
        .top .province ul.sub li {
            padding: 0.0625rem 0.15rem;
        } */
        .quarter span {
            transform: scale(0.9);
        }
    }

    .icon-cup1{
        display: inline-block;
        width: 0.6rem;
        height: 0.5rem;
        background: url(../../assets/image/奖杯1.png) center center no-repeat;
        background-size: 0.56rem auto;
        text-align: center;
        vertical-align: top;
        font-size: 0.3rem !important;
        font-weight: 600;
        color: #000;
    }
    .icon-cup2{
        display: inline-block;
        width: 0.6rem;
        height: 0.5rem;
        background: url(../../assets/image/奖杯2.png) center center no-repeat;
        background-size: 0.55rem auto;
        text-align: center;
        vertical-align: top;
        font-size: 0.3rem !important;
        font-weight: 600;
        color: #000;
    }
    .icon-cup3{
        display: inline-block;
        width: 0.6rem;
        height: 0.5rem;
        background: url(../../assets/image/奖杯3.png) center center no-repeat;
        background-size: 0.55rem auto;
        text-align: center;
        vertical-align: top;
        font-size: 0.3rem !important;
        font-weight: 600;
        color: #000;
    }
</style>